<template>
  <div class="screen_full" @click="handleClick">
    <i class="iconfont iconquanping primary_color_hover" :style="styles" v-if="!isFullscreen"></i>
    <i class="iconfont icontuichuquanping primary_color_hover" :style="styles" v-if="isFullscreen"></i>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import screenfull, { Screenfull } from "screenfull";

export default defineComponent({
  name: "screenFull",
  props: {},
  data() {
    return {
      isFullscreen: false,
      styles: {
        fontSize: "18px",
        color: "#4a4a4a",
        cursor: "pointer",
        paddingTop: "2px",
        fontWeight: 600,
      },
    };
  },
  components: {},
  setup(props) {},
  //
  mounted() {
    this.init();
  },
  beforeUnmount() {
    this.destroy();
  },
  methods: {
    handleClick() {
      if (!screenfull.isEnabled) {
        this.$message.warn("You browser can not work");
        return false;
      }
      screenfull.toggle();
    },
    handleChange() {
      this.isFullscreen = (screenfull as Screenfull).isFullscreen;
    },
    init() {
      if (screenfull.isEnabled) {
        screenfull.on("change", this.handleChange);
      }
    },
    destroy() {
      if (screenfull.isEnabled) {
        screenfull.off("change", this.handleChange);
      }
    },
  },
});
</script>

<style lang="scss" scoped>

</style>
